<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>正奥能源油库管理</title>
		<link rel="stylesheet" href="../css/element.min.css">
		<style>
			html,
			body,
			div,
			span,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			p,
			a,
			img,
			ul,
			ol,
			li {
				margin: 0;
				padding: 0;
				border: 0;
				font-size: 16px;
				font: inherit;
				vertical-align: baseline;
			}

			html,
			body {
				height: 100%;
			}
			
			/* .el-tabs {
				height: 100%;
			}
 */
			/* .el-input__inner {
				width: 500px;
			}
 */
            [v-cloak] {
              display: none;
            }
			.mt15 {
				margin-top: 15px;
			}
			.w100 {
				width: 100%;
			}

			.el-tabs__content {
				height: 100%;
			}

			.el-tab-pane {
				height: 100%;
			}

			.el-tabs__header {
				text-align: center;
				border: 1px solid #d9d9d9;
				width: 130px;
				height: 100%;
			}

			.el-tabs--left .el-tabs__item.is-left {
				border-bottom: 1px solid #d9d9d9;
				text-align: center;
			}

			.el-form {
				border: 1px solid #d9d9d9;
				padding: 25px 10px 0 10px;
			}

			#oilguntab {
				height: 100%;
			}
			.el-form-item__error {
				width: 120px;
			}
			#oilguntab {
				height: 450px;
			}
		</style>
	</head>
	<body>
		<div id="app" style="height: 95%;width: 98%;" v-cloak>
			<div style="width: 100%;padding: 10px;height: 100%;">
				<el-form :model="forms" :rules="rules" ref="forms">
					<el-row :gutter="10">
						<el-col :span="4">
							<el-form-item label="油站" :label-width="formLabelWidth" prop="stationNumber">
								<el-select v-model="forms.stationNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in oilSelectList" :key="item.fueltankno"
										:label="item.energystationname" :value="item.energystationid"
										@click.native="handleChanges(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="罐号" :label-width="formLabelWidth" prop="tankNumber">
								<el-select v-model="forms.tankNumber" placeholder="请选择" class="w100">
									<el-option v-for="item in SelectList" :key="item.fueltankno"
										:label="item.fueltankname" :value="item.fueltankno"
										@click.native="handleShowFlangChanges(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="开始时间 :" prop="startTime" label-width="100px">
								<el-date-picker v-model="forms.startTime" type="datetime" placeholder="选择开始时间"
									style="width: 315px" format="yyyy-MM-dd HH:mm:ss" class="w100"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="结束时间 :" prop="endTime" label-width="260px">
								<el-date-picker v-model="forms.endTime" type="datetime" placeholder="选择结束时间"
									style="width: 315px" format="yyyy-MM-dd HH:mm:ss" class="w100"
									value-format="yyyy-MM-dd HH:mm:ss">
								</el-date-picker>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="4">
							<el-form-item label="卸油量(L)" label-width="81px" prop="dischargeCapacity">
								<el-input v-model.trim="forms.dischargeCapacity " placeholder="请输入内容"
								style="width: 96%;">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="油温" :label-width="formLabelWidth" prop="oilTemperature">
								<el-input v-model.trim="forms.oilTemperature" placeholder="请输入内容" class="w100"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="4">
							<el-form-item label="是否下发" label-width="102px" prop="">
								<el-select v-model="forms.isSend" placeholder="请选择" class="w100">
									<el-option v-for="item in statusSelect" :key="item.value"
										:label="item.label" :value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="4" style="margin-left: 10px;">
							<el-button type="primary" @click='submitForms'>确 定</el-button>
						</el-col>
					</el-row>
				</el-form>
				
				<el-form style="border: 0;">
					<el-row style="margin: 10px 0; font-size: 14px;">
						<el-col :span="4">
							<el-form-item label="油站" :label-width="formLabelWidth">
								<el-select v-model="selectForms.stationNumber" placeholder="请选择">
									<el-option v-for="item in oilSelectList" :key="item.fueltankno"
										:label="item.energystationname" :value="item.energystationid"
										@click.native="handleChanges(item)">	
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col  :span="4">
							<el-form-item label="油罐" :label-width="formLabelWidth">
								<el-select v-model="selectForms.tankNumber" placeholder="请选择">
									<el-option v-for="item in SelectList" :key="item.fueltankno" :label="item.fueltankname"
										:value="item.fueltankno" @click.native="handleShowFlangChange(item)">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col  :span="4" style="margin-left: 10px;">
							<el-button type="primary" @click='queryBtns'>查询</el-button>
							<el-button @click="resetBtns">重置</el-button>
							<el-button @click="resetBtns">刷新</el-button>
						</el-col>
					</el-row>
				</el-form>
					
					
						
				<div id="oilguntab">
					<el-table ref="tableData" v-loading="loading" :border=true :data="tableDatas" width='100%' 	height="100%" style="overflow: auto">>
						<el-table-column type="index" width="50" align='center'>
						</el-table-column>
						<el-table-column label="油站名称" prop="stationName" align='center'></el-table-column>
						<el-table-column label="油罐编号" prop="tankNumber" align='center'></el-table-column>
						<el-table-column label="油罐名称" prop="tankName" align='center'></el-table-column>
						<el-table-column label="卸油量(L)" prop="dischargeCapacity" align='center'></el-table-column>
						<el-table-column label="开始时间" prop="startTime" align='center'></el-table-column>
						<el-table-column label="结束时间" prop="endTime" align='center'></el-table-column>
						<el-table-column label="油温" prop="oilTemperature" align='center'></el-table-column>
						<el-table-column label="操作时间" prop="operatorTime" align='center'></el-table-column>
						<el-table-column label="是否下发" prop="isSend" align='center'>
							<template slot-scope="scope">
								<el-button type="primary" size="small" v-if='scope.row.isSend == "0"'
									@click='issues(scope.row.id)'>下发
								</el-button>
								<!-- <span v-if='scope.row.isSend == "0"'>未下发</span> -->
								<span v-if='scope.row.isSend == "1"'>已下发</span>
							</template>
						</el-table-column>
					</el-table>
					<!--      分页-->
					<div class="mt15">
						<el-pagination background layout="prev, pager, next" :total="totals"
							page-sizes="[10, 20, 30, 40]" :page-size="10" @size-change="handleSizeChanges"
							@current-change="handleCurrentChanges" :current-page="currentPage">
						</el-pagination>
					</div>
			
				</div>
				
			</div>
		</div>
	  	       <script src="../js/vue.min.js"></script>
	  	       <script src="../js/axios.js"></script>
	  	       <script src="../js/element.lib.js"></script>
				<script>
					new Vue({
						el: '#app',
						data() {
							return {
								value1: '',
								stationid: 0,
								total: 0,
								totals: 0,
								currentPage: 0,
								tabPosition: 'left',
								tableData: [],
								tableDatas: [],
								loading: false,
								formLabelWidth: '80px',
								oilSelectList: [],
								SelectList: [],
								pageSize: 10,
								pageSizes: 10,
								pageNums: 0,
								title: '液位仪 数据管控中心',
								forms: {
									tankNumber: '',
									dischargeCapacity: '',
									oilTemperature: '',
									stationNumber: '',
									tankName: '',
									stationName: '',
									startTime: '',
									endTime: '',
									isSend: '0'
								},
								// 查询
								selectForms: {
									stationNumber: '',
									tankNumber: '',
								},
								// 状态下拉
								statusSelect: [{
										value: '0',
										label: '不下发'
									},
									{
										value: '1',
										label: '下发'
									}
								],
								rules: {
									stationNumber: [{
										required: true,
										message: '请选择油站',
										trigger: 'axis'
									}, ],
									startTime: [{
										required: true,
										message: '请选择油站',
										trigger: 'axis'
									}, ],
									endTime: [{
										required: true,
										message: '请选择油站',
										trigger: 'axis'
									}, ],
									tankNumber: [{
										required: true,
										message: '请选择罐号',
										trigger: 'axis'
									}],
									tankStock: [{
											required: true,
											message: '请输入库存量',
											trigger: 'axis'
										},
										{
											pattern: /^\d+(\.\d{0,1})?$/,
											message: '最多保留一位小数',
											trigger: 'blur'
										}
									],
									oilTemperature: [{
											required: true,
											message: '请输入油温',
											trigger: 'axis'
										},
										{
											pattern: /^\d+(\.\d{0,1})?$/,
											message: '最多保留一位小数',
											trigger: 'blur'
										}
									],
									waterHight: [{
											required: true,
											message: '请输入水高',
											trigger: 'axis'
										},
										{
											pattern: /^\d+(\.\d{0,1})?$/,
											message: '最多保留一位小数',
											trigger: 'blur'
										}
									],
									dischargeCapacity: [{
											required: true,
											message: '请输入卸油量',
											trigger: 'axis'
										},
										{
											pattern: /^\d+(\.\d{0,1})?$/,
											message: '最多保留一位小数',
											trigger: 'blur'
										}
									],
								}
							}
						},
						created() {
							// const token = localStorage.getItem('token')
							// if(!token) {
							// 	window.location.href = './login/index.html'
							// }
							this.initToken()
							this.initBaseUrl()
						},
						mounted() {
							this.pageNums = 0
							this.tankSelectList()
							this.getOilselect()
							
							
						},
						methods: {
							// 初始化token 数据
							initToken() {
								const token = localStorage.getItem('token')
								axios.defaults.headers.common['Authorization'] = token // 改写axios 源码，初始化的时候往里面写入token
							},
							//初始化接口前缀 便于修改
							initBaseUrl() {
									axios.defaults.baseURL = 'http://192.168.3.30:8799'
								},
							issues(id) {
								const url =
									`/ec/ecOilDischargeRecord/send/${id}`;
								axios.get(url)
									.then(response => {
										if (response.data.code == 200) {
											this.$message({
												message: '下发成功',
												type: 'success'
											});
											this.getTableLists()
										}
										else if (response.data.code == 401) {
											this.$message({
												message: response.data.msg,
												type: 'error'
											});
										}
									})
									.catch(error => {
		
									});
							},
							handleSizeChanges(val) {},
							handleCurrentChanges(val) {
								this.pageNums = val - 1
								this.getTableLists()
							},
							addRows() {
								this.dialogFormVisibles = true;
							},
							// 油罐下拉列表
							tankSelectList(stationid) {
								// 发起 GET 请求获取站点列表
								axios.get(`/ec/stationBaseInfo/queryFueltank/${stationid}`)
									.then(response => {
										this.SelectList = response.data;
									})
									.catch(error => {
										// 请求失败，处理错误
										console.error('Error fetching station list:', error);
									})
							},
							// 油站下拉列表
							getOilselect() {
								axios.get('/ec/stationBaseInfo/queryStationList')
									.then(response => {
										this.oilSelectList = response.data;
									})
									.catch(error => {
										// 请求失败，处理错误
										console.error('Error fetching station list:', error);
									})
							},
							// 提交按钮
							submitForms() {
								this.$refs.forms.validate((valid) => {
									if (valid) {
										const url = '/ec/ecOilDischargeRecord/save';
										const formData = this.forms;
										axios.post(url, formData)
											.then(response => {
												if (response.data.code == 200) {
													this.$message({
														message: '新增成功',
														type: 'success'
													});
													this.getTableLists()
												this.$refs.forms.resetFields()
												}
												else if (response.data.code == 401) {
													this.$message({
														message: response.data.msg,
														type: 'error'
													});
												}
											})
											.catch(error => {
												this.$message.error('新增失败');
											});
									} else {
										return false;
									}
								});
							},
							
							handleShowFlangChanges(item) {
								this.forms.tankName = item.fueltankname
							},
							handleChanges(item) {
								this.forms.stationName = item.energystationname
								this.tankSelectList(item.energystationid)
							},
							// 获取表格数据
							//卸油
							getTableLists() {
								let pageNums = this.pageNums
								let pageSizes = this.pageSizes
								const url =
									`/ec/ecOilDischargeRecord/queryByselect?pageNum=${pageNums}&pageSize=${pageSizes}`;
								const selectForms = this.selectForms;
								axios.get(url, {
										params: selectForms
									})
									.then(response => {
										if (response.data.code == 200) {
											this.tableDatas = response.data.page.content
											this.totals = response.data.page.totalElements
										}
										else if (response.data.code == 401) {
											this.$message({
												message: response.data.msg,
												type: 'error'
											});
										}
									})
									.catch(error => {
		
									});
							},
							// 查询按钮
							queryBtns() {
								if(this.selectForms.stationNumber !== '' || this.selectForms.tankNumber !== '') {
										this.getTableLists()
								}else {
									this.$message({
										message: '请输入查询条件',
										type: 'warning'
									});
								}
							
							},
							//重置按钮
							resetBtns() {
								this.selectForms = {
										stationNumber: '',
										tankNumber: '',
									},
								this.pageNums = 0
								this.pageSizes = 10
								this.SelectList = []
								this.getTableLists()
							}
						}
					});
				</script>
			</body>
		</html>